<template>
	<view>
		<u-navbar :title="type" @rightClick="rightClick" :autoBack="true">
		</u-navbar>

		<!-- 悬浮按钮 -->
		<uni-fab horizontal="right" vertical="bottom" :content="content" @trigger="trigger" />
		<!-- 弹出的选择框 -->
		<u-popup :show="show" @close="show = false" :round="10">
			<view class="pop_head up_top up_bottom" style="padding-left: 20rpx;">服务项目</view>
			<checkbox-group @change="checkboxChange">
				<view class="flex_between" style="margin-top: 20rpx;" v-for="item in serviceList" :key="item.id">
					<view v-if="item.id != null">
						<checkbox :value="JSON.stringify(item)" :checked="serviceIds.includes(item.id)?true:false" style="transform:scale(0.7)" />
						{{item.name}}
					</view>
					<view class="up_top">
						<text style="color: coral;font-size: 35rpx;" class="up_right">￥{{item.newPrice}}</text>
						<text class="del">￥{{item.oldPrice}}</text>
					</view>
				</view>
			</checkbox-group>
			<view style="display: flex;justify-content: center;">
				<view class="flex up_bottom v_center" style="width: 500rpx;">
					<uni-tag :circle="true" :text="'合计：'+newPrice" type="primary" />
					<u-button @click="confirm" style="width: 300rpx;" type="primary" size="small">确定已选服务</u-button>
				</view>
			</view>

		</u-popup>

		<view class="head">
			<!-- 店铺信息 -->
			<uni-card style="padding-top: 0;">
				<div v-if="data != null">
					<u--image style="margin-top: 20rpx;" width="100%" height="300rpx" :src="data?data.shopLicence:l">
					</u--image>
					<u--text :text="data.shopName" size="50rpx" style="margin-top: 30rpx;"></u--text>
					<view class="list-2">
						<u-rate :value="data.star" readonly size="12"></u-rate>{{data.star}}分
						<text class="up_left"> 销量：{{data.sales}}</text>
					</view>
					<view class="list-3">
						<view>营业时间：{{data.week}}</view>
						<view></view>
						<view style="display: flex;">
							<view class="up_right">地址：{{data.shopArea+data.shopAddress}}</view>
							<u-icon name="twitter" color="#2979ff" size="28"></u-icon>
						</view>
					</view>
				</div>
			</uni-card>

			<!-- 专业清洗 -->
<!-- 			<uni-card title="服务项目" style="margin-top: 0;" v-if="type !='汽车维修'">
				<view class="flex_between" v-for="item in serviceList" :key="item.id">
					<view>{{item.name}}</view>
					<view class="up_top">
						<text style="color: coral;font-size: 40rpx;" class="up_right">￥{{item.newPrice}}</text>
						<text class="del">￥{{item.oldPrice}}</text>
					</view>
				</view>
			</uni-card> -->

			<!-- 汽车保养 -->
			<uni-card title="服务项目" style="margin-top: 0;" v-if="type !='汽车维修'">
				<view v-if="serviceList != null && serviceList != '' && serviceList.length > 0">
					<checkbox-group @change="checkboxChange">
						<view v-for="item in serviceList" :key="item.id">
							<view class="flex_between">
								<view v-if="item.id != null">
									<checkbox :value="JSON.stringify(item)" :checked="serviceIds.includes(item.id)?true:false" style="transform:scale(0.7)" />
									{{item.name}}
								</view>
								<view class="up_top">
									<text style="color: coral;font-size: 35rpx;"
										class="up_right">￥{{item.newPrice}}</text>
									<text class="del">￥{{item.oldPrice}}</text>
								</view>
							</view>
							<view>{{item.intro}}</view>
						</view>
					</checkbox-group>
				</view>

			</uni-card>



			<uni-card title="服务评价">
				<view class="list border_bottom_line" v-for="item in accessList" :key="item.id">
					<image shape="circle" style="width: 150rpx;height: 150rpx;border-radius: 75rpx;" :src="l">
					</image>
					<view class="list-item-text" style="width: 450rpx;">
						<view class="list-text"><text>{{item.name}}</text><text>{{item.commentTime}}</text>
						</view>
						<view style="margin-left: 15rpx;">
							<u-rate class="up_top" :value="item.star" readonly size="12"></u-rate>
							<view class="up_top ">
								<u--text :lines="2" :text="item.comments"></u--text>
							</view>
						</view>

					</view>
				</view>
			</uni-card>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选择框
				// >>>>>>>>>>>>
				show: false,
				newPrice: 0,
				oldPrice: 0,
				form:{
					id:'',
					type:'',
					data:'',
					serviceList:[],
					newPrice:0
				},
				// <<<<<<<<<<<<<
				type: '汽车保养',
				l: 'https://cdn.uviewui.com/uview/album/1.jpg',
				params: {
					pageNum: '',
					pageSize: '',
					shopId: ''
				},
				data: '',
				accessList: [],
				accessParams:{
					pageNum: 1,
					pageSize: 5,
					shopId: ''
				},
				accessTotal:10,

				content: [{
						text: '立即预约',
						actice: false,
						iconPath: '/static/c1.png'
					},
					{
						text: '开启导航',
						actice: false,
						iconPath: '/static/c2.png'
					}
				],
				content2: [{
						text: '购物车',
						actice: false,
						iconPath: '/static/c1.png'
					},
					{
						text: '确认服务',
						actice: false,
						iconPath: '/static/c2.png'
					},
					{
						text: '开启导航',
						actice: false,
						iconPath: '/static/c3.png'
					}
				],

				// <<<<<<<<服务项目>>>>>>>>
				serviceIds:[],
				serviceList: [],
				// <<<<<<<<<<<<<<<<<<<<<<

			}
		},

		onLoad(e) {
			if(e.form == null){
				return;
			}
			e = JSON.parse(e.form)
			console.log(e)
			if (e.type != null) {
				this.type = e.type
				// 添加form信息
				this.form.type = e.type
			}
			// 切换导航栏
			if (this.type === '汽车保养' || this.type === '专业清洗') {
				this.content = this.content2
			}
			// 获取商店数据
			if (e.id != null) {
				this.params.shopId = e.id
				this.accessParams.shopId = e.id
				
				this.getById(e.id)
				// 添加form信息
				this.form.id = e.id
				this.form.data = this.data
			}
		},
		onReachBottom() {
			console.log("onReachBottom:触底方法");
			// 在这里加载更多数据
			this.addList()
		},
		onPullDownRefresh() {
			this.accessList = []; // 清空列表
			this.accessParams = {
					shopId: this.params.shopId,
					pageNum: 1,
					pageSize: 5
				},
			this.getAccessList(); // 获取数据
			setTimeout(() => {
				uni.stopPullDownRefresh(); // 停止下拉刷新
			}, 1000);
		},
		methods: {
			
			getById(id) {
				let that = this
				// 获取商店信息
				this.$http({
					url: `/api/shop/shop/` + id,
					method: 'GET',
					success(res) {
						console.log("商店信息:")
						console.log(res.data)
						that.data = res.data.data
					}

				})

				// 获取服务信息
				this.$http({
					url: `/api/service/service/shopId/` + id,
					method: 'GET',
					success(res) {
						console.log("服务信息:")
						console.log(res.data)
						that.serviceList = res.data.data
					}
				})

				// 获取评价信息
				this.getAccessList()
			},
			getAccessList(){
				let that = this
				// 获取评价信息
				this.$http({
					url: `/api/order/evaluate/list/shopId`,
					method: 'GET',
					data: that.accessParams,
					success(res) {
						console.log("评价信息")
						console.log(res.data)
						that.accessTotal = res.data.total
						that.accessList = [...that.accessList, ...res.data.rows]
					}
				})
			},
			addList(){
				if (this.accessParams.pageNum*this.accessParams.pageSize >= this.accessTotal) {
					uni.showToast({
						title: '已经到底了！'
					})
				} else {
					this.accessParams.pageNum += 1
					this.getAccessList()
				}
			},

			trigger(e) {
				let that = this
				console.log(e.item);
				let form = {}
				form.id = this.form.id
				form.type = this.type
				if (e.item.text === '立即预约') {
					uni.navigateTo({
						url: '/pages/yunRang/carMaintainReservation/cmr_add/cmr_add?form='+JSON.stringify(form)
					})
				} else if (e.item.text === '开启导航') {
					uni.navigateTo({
						url: `/pages/yunRang/carMaintainReservation/cmr_search_map/cmr_search_map?`+
						`form=${JSON.stringify(form)}`
					})
				} else if (e.item.text === '购物车') {
					this.show = true

				} else if (e.item.text === '确认服务') {
					this.confirm()
				}
			},

			checkboxChange(e) {
				console.log(e);
				// console.log(e.detail);
				this.newPrice = 0
				this.oldPrice = 0
				if(e != null)
				// 取消所有服务
				// console.log(this.serviceList)
				this.serviceIds = []
				// 添加选中的服务
				for (let item of e.detail.value) {
					if(item != null && item != ''){
						let ser = JSON.parse(item)
						// console.log(ser)
						this.newPrice += parseFloat(ser.newPrice)
						this.oldPrice += parseFloat(ser.oldPrice)
						this.serviceIds.push(ser.id)
					}
				}
				console.log(this.serviceIds)
				
				// 添加form信息
				this.form.serviceList = e.detail.value
				this.form.newPrice = this.newPrice
				this.form.oldPrice = this.oldPrice
			},

			// 确认服务项目--添加订单
			confirm() {
				let list = []
				for(let i of this.form.serviceList){
					list.push(JSON.parse(i))
				}
				// 判断是否存在服务
				if(list.length == 0){
					uni.showToast({
						title:'请选择服务',
						icon:'error'
					})
					return;
				}
				// 添加订单数据
				this.form.serviceList = list
				this.form.data = this.data
				this.form.serviceIds = this.serviceIds
				
				let item = JSON.stringify(this.form)
				uni.navigateTo({
					url: '/pages/yunRang/carMaintainReservation/order_confirm/order_confirm?form='+item
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.head {
		width: 100%;
		height: 400rpx;
		background-image: url(/static/hBg.png);

		padding-top: 20rpx;

		margin-top: 100rpx;
	}

	.up_right {
		margin-right: 20rpx;
	}

	.up_left {
		margin-left: 20rpx;
	}

	.up_top {
		margin-top: 10rpx;
	}

	.up_bottom {
		margin-bottom: 20rpx;
	}




	.v_center {
		align-items: center;
	}

	.del {
		text-decoration: line-through;
	}

	.list-2 {
		width: 100%;
		display: flex;
	}

	.list {
		display: flex;

	}

	.list-text {
		width: 400rpx;
		display: flex;
		justify-content: space-around;
	}

	.border_bottom_line {
		border-bottom: 2rpx solid gray;
		padding-bottom: 20rpx;
		padding-top: 20rpx;
	}

	.flex_between {
		display: flex;
		justify-content: space-between;
	}

	.flex {
		display: flex;
	}

	.pop_head {
		font-size: 35rpx;
		font-weight: 600;
		border-bottom: 2rpx solid gray;
	}
</style>